<!--  -->
<template>
    <div class="pending">
      <div class="tab_show">
        <el-tabs v-model="formInline.state" @tab-click="handleClick">
          <el-tab-pane v-for="item in tabPane" :key="item.label" :label="item.label" :name="item.name"/>
        </el-tabs>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <div>
                <el-input v-model="formInline.search" placeholder="请输入内容">
                  <el-select
                    slot="prepend"
                    v-model="formInline.searchType"
                    style="width:130px"
                    placeholder="请选择"
                  >
                    <el-option label="订单id" value="1"/>
                    <el-option label="买家账户" value="2"/>
                    <el-option label="收件人姓名" value="3"/>
                    <el-option label="收件人手机号" value="4"/>
                  </el-select>
                </el-input>
              </div>
            </el-form-item>
            <!-- <el-form-item label="商户名称">
              <el-input v-model="formInline.shopName" placeholder="请输入"/>
            </el-form-item> -->
            <el-form-item label="下单时间">
              <el-date-picker
                v-model="formInline.dates"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="search">查询</el-button>
              <el-button type="success" plain @click="orderDataExport">导出订单</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
          <el-table
            ref="multipleTable"
            v-loading="tableLoading"
            :data="tableData"
            border
            stripe
            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              v-for="item in column"
              :key="item.lable"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip/>
            <!-- <el-table-column label="订单状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span :class="'state-'+ scope.row.state ">{{ scope.row.state | stateName }}</span>
              </template>
            </el-table-column> -->
  
            <el-table-column label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="btnList">
                  <el-button type="text" @click="seeMore(scope.row)">查看订单</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination
              :current-page="formInline.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
      <el-dialog
        title="订单详情"
        :visible.sync="detailVisible"
        width="74%"
        center
        :close-on-click-modal="false"
      >
        <OrderDetail :detailRow="form" @cancel="cancel"/>
      </el-dialog>
    </div>
  </template>
  
  <script>
  const tabPane = [
    {
      name: '',
      label: '全部'
    },
    {
      name: '1',
      label: '待付款'
    },
    {
      name: '2',
      label: '待发货'
    },
    {
      name: '3',
      label: '已发货'
    },
    {
      name: '4',
      label: '已完成'
    },
    {
      name: '5',
      label: '已关闭'
    }
  ]
  const column = [
    {
      prop: 'orderId',
      label: '编号',
      width: '150',
    },
    {
      prop: 'number',
      label: '商铺名称',
      width: '100',
    },
    {
      prop: 'shopName',
      label: '商品',
      width: '220',
    },
    {
      prop: 'customerName',
      label: '客户名称',
    },
    {
      prop: 'receiveName',
      label: '车号',
    },
    {
      prop: 'receivePhone',
      label: '申请提货数量',
    },
    {
      prop: 'price',
      label: '实际提货数量',
    },
    {
      prop: 'createTime',
      label: '应收货款',
    },
    {
      prop: 'createTime',
      label: '提货状态',
    },
    {
      prop: 'createTime',
      label: '提货日期',
    },
  ]
  import OrderDetail from '@/views/order/pending/pendDetails.vue'
  import {orderGetAll, orderExport} from '@/api/order'
  
  export default {
    components: {OrderDetail},
    data() {
      // 这里存放数据
      return {
        activeName: 'first',
        formInline: {
          searchType: '1',
          search: '', // 搜索字段
          state: '',
          // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
          dates: [], // 下单时间数组
          page: 1,
          shopName: '',
          pageSize: 10
        },
        total: 1,
        column,
        tabPane,
        tableData: [],
        tableLoading: false,
        detailVisible: false,
        form: {}
      }
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getAll(this.formInline)
      this.handleClick({name: ''})
    },
    filters: {
      stateName(val) {
        let v = val - 0
        let name = ''
        if (v === 1) {
          name = '待付款'
        } else if (v === 2) {
          name = '待发货'
        } else if (v === 3) {
          name = '已发货'
        } else if (v === 4) {
          name = '已完成'
        } else if (v === 5) {
          name = '关闭'
        }
        return name
      }
    },
    // 方法集合
    methods: {
      handleSizeChange(val) {
        this.formInline.pageSize = val
        this.getAll(this.formInline)
      },
      handleCurrentChange(val) {
        this.formInline.page = val
        this.getAll(this.formInline)
      },
      handleClick(tab, event) {
        this.page = 1
        this.formInline.state = tab.name
        this.formInline.page = 1
        this.getAll(this.formInline)
      },
      //  查询
      search() {
        this.total = 1
        this.formInline.page = 1
        this.getAll(this.formInline)
      },
      // 详情
      seeMore(row) {
        this.detailVisible = true
        this.form = row
      },
      cancel() {
        this.detailVisible = false
      },
      // 初始化查询所有数据
      async getAll(formInline) {
        this.tableLoading = true
        const res = await orderGetAll(formInline)
        this.tableData = res.data.list
        this.total = res.data.total
        this.tableLoading = false
      },
      // 导出订单
      async orderDataExport() {
        this.$message({
          message: '数据导出中，请勿重复操作！',
          type: 'success'
        })
        const res = await orderExport(this.formInline)
        if (!res) {
          return
        }
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const fileName = '订单数据明细表.xls'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      },
    }
  }
  </script>
  <style lang='scss' scoped>
  //@import url(); 引入公共css类
  @import url("../../../styles/elDialog.scss");
  
  .tab_show {
    padding-left: 30px;
  }
  
  .state-1 {
    color: #E6A23C;
  }
  
  .state-2 {
    color: #F56C6C;
  }
  
  .state-3 {
    color: #409EFF;
  }
  
  .state-4 {
    color: #67C23A;
  }
  
  .state-5 {
    color: #909399;
  }
  </style>
  